<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			list-style: none;
			text-decoration: none;
		}
	</style>
  <script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
		//hello
  
		$(function(){

			var $category=$("#sx ul li:gt(5):not(:last)");
			$category.hide();
			var $toggleBtn=$("#showall");
			$toggleBtn.click(function() {
				if ($category.is(':visible')) {
					$category.hide();
					$(this).find("span").text("显示全部");


				} else {
					$category.show();
				$(this).find("span").text("^精简品牌^");
				}
				return false;
			});
		})
  </script>
</head>
<body>
  <div id="sx">
  	<ul>
  		<li><a href="#">三星</a></li>
  		<li><a href="#">小米</a></li>
  		<li><a href="#">苹果</a></li>
  		<li><a href="#">魅族</a></li>
  		<li><a href="#">华为</a></li>
  		<li><a href="#">三星</a></li>
  		<li><a href="#">三星</a></li>
  		<li><a href="#">三星</a></li>
  		<li><a href="#">三星</a></li>
  		<li><a href="#">三星</a></li>
  		<li><a href="#">三星</a></li>
  		<li><a href="#">三星</a></li>
  		<li><a href="#">三星</a></li>
  		<li><a href="#">三星</a></li>
  		<li><a href="#">最后</a></li>
  	</ul>
  	<a id="showall" href="#"><span>显示全部</span></a>
  </div>
</body>
</html>